import { Button, Switch } from 'antd';
import React, { Component } from 'react';
import { RouteComponentProps, Router, withRouter } from 'react-router';
import { Link, Route } from 'react-router-dom';
import styled from 'styled-components';
import MethodCube from './MethodCube';
import MethodSphere from './MethodSphere';

const Wrapper = styled.div`
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
`;
interface SelectMethodProps extends RouteComponentProps
{
    history: any;
}
class SelectMethod extends Component<SelectMethodProps, {}>
{
    render()
    {
        return (
            <Wrapper>
                <div>
                    <Button style={{ display: "inline" }}><Link to="/SelectMethod/MethodSphere">全景</Link></Button>
                    <Button style={{ display: "inline" }}><Link to="/SelectMethod/MethodCube">六面</Link></Button>
                </div>
                <Route path="/SelectMethod/MethodSphere">
                    <MethodSphere />
                </Route>
                <Route path="/SelectMethod/MethodCube">
                    <MethodCube />
                </Route>
            </Wrapper>

        );
    }
}

export default withRouter(SelectMethod);
